<template>
	<view class="phoneLogin">
		<view class="phone-text">
			<h1>其他号码登录</h1>
		</view>

		<view class="phone">
			<view class="login-form-title">
				<text>+86</text><input type="text" placeholder="请输入手机号" v-model="login.phoneNumber">
			</view>
			<view class="login-form-verify">
				<input type="text" placeholder="请输入验证码" v-model="login.code">
				<u-button class="login-form-verify-btn" text="获取验证码" color="#fff" shape="circle" :disabled="disabled"
					@click="verifyCode"></u-button>
				<u-count-down :time="60 * 1000" format="ss" v-if="showTime"></u-count-down>
			</view>
			<u-button class="login-from-bottom" text="登录" color="#ff2442" shape="circle" @click="toLogin"></u-button>
		</view>

		<view class="phoneLogin-bottom">
			<view class="popup-check-box">
				<u-checkbox-group placement="column" @change="checkboxChange">
					<u-checkbox shape='circle' activeColor='#ff2442' name='check' :checked="check" size="40rpx">
					</u-checkbox>
				</u-checkbox-group>
				<view class="popup-check-box-text">
					<text>
						我已阅读并同意 <i>《用户协议》</i><i>《隐私政策》</i><i>《儿童/青少年个人信息保护规则》</i>
					</text>
				</view>
			</view>
			<view class="phoneLogin-bottom-weixin">
				<u-divider text="其他登录方式" textSize="40rpx"></u-divider>
				<view class="weixin-QQ">
					<view class="weixin">
						
					</view>
					<view class="QQ">
						
					</view>
				</view>
			</view>
			<u-popup :show="showTow" mode="bottom" :round="10" :closeable="true" @close="close">
				<view class="popup-content">
					<h3 class="popup-title">请阅读并同意以下协议</h3>
					<view class="popup-title-text">
						<i>《用户协议》</i><i>《隐私政策》</i><i>《儿童/青少年个人信息保护规则》</i>
					</view>
					<u-button class="popup-content-button" text="同意并继续" color="#ff2442" shape="circle"
						@click="consent"></u-button>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				login: {
					phoneNumber: "",
					code: "",
					min:"",
					userId:"",
					token:"",
					isNew:""
				},
				authCode:{
					phoneNumber: "",
					code: "",
					min:""
				},
				show: false,
				showTow: false,
				showTime: false,
				check: true,
				messageAlert: false,
				disabled: false
			}
		},
		methods: {
			toLogin() {
				if (this.check == false) {
					this.showTow = true;
				} else {
					this.request("/user/login", "post", this.login).then(
						(res) => {
							console.log(res);
							if (res.data.code == 200) {
								uni.setStorageSync('id',res.data.result.userId);
								uni.setStorageSync('Authorization',res.data.result.token);
								if (res.data.result.new==true) {
									uni.navigateTo({
										url:"/pages/login/SexAndAge"
									})
								}else{
									uni.switchTab({
									url: '/pages/index/index',
								})
								}
								
							}
						}).catch((err) => {
						console.log(err);
					})
				}
			},
			close() {
				this.show = false;
				this.showTow = false;
			},
			checkboxChange() {
				this.check = !this.check;
			},
			consent() {
				this.check = !this.check;
				this.showTow = false;
				this.toLogin();
			},
			verifyCode() {
				//15635136583
				console.log(123);
				this.showTime = true;
				this.disabled = true;
				setTimeout(() => {
					this.showTime = false;
					this.disabled = false;
				}, 60000);
				this.authCode.phoneNumber=this.login.phoneNumber;
				this.request("/user/sendCode", "post", this.authCode).then(
					(res) => {
						console.log(res);
					}).catch((err) => {
					console.log(err);
				})
			}

		}
	}
</script>

<style>
	.phoneLogin {
		height: 1538rpx;
		display: flex;
		justify-content: space-evenly;
		flex-direction: column;
		align-items: center;
		align-content: flex-end;
	}

	.phone,
	.phoneLogin-bottom {
		width: 90%;
		height: 500rpx;
		display: flex;
		flex-direction: column;
		align-content: space-evenly;
		align-items: center;
	}

	.popup-check-box {
		display: flex;
	}

	.popup-check-box-text {
		text-align: center;
		margin-bottom: 100rpx;
	}

	.popup-check-box-text text i {
		font-style: normal;
		color: #4a6286;

	}

	.phoneLogin-bottom-weixin {
		width: 80%;
		height: 300rpx;
	}

	.weixin-QQ {
		width: 100%;
		display: flex;
		justify-content: space-evenly;
	}

	.weixin,
	.QQ {
		width: 100rpx;
		height: 100rpx;
	
		border-radius: 50%;
		display: flex;
		justify-content: center;
	}

	
	.QQ::before{
		font-family: "iconfont" !important;
		content: "\e667";
		font-size: 90rpx;
		color: #3baefe;
	}
   .weixin::before{
	   font-family: "iconfont" !important;
	   content: "\e607";
	   font-size: 90rpx;
	   color: #07c062;
   }
	.qq-img,
	.weixin-img {
		width: 80rpx;
		height: 80rpx;
		object-fit: cover;
		object-position: center;
		margin-top: 8rpx;
	}

	.login-form-title {
		width: 100%;
		height: 160rpx;
		display: flex;
		justify-content: space-evenly;
		/* box-sizing: content-box; */
		align-items: center;
	}

	.login-form-title text {
		display: inline-block;
		font-size: 32rpx;
		/* margin-left: 15%; */
	}

	.login-form-title input {
		width: 50%;
		height: 85%;
		margin-left: 5%;
	}

	.login-form-verify {
		width: 80%;
		height: 100rpx;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
	}

	.login-form-verify-btn {
		width: 50%;
		color: black !important;
	}

	.login-from-bottom {
		width: 70%;
		margin-left: 15%;
		margin-top: 50rpx;
	}

	.popup-content-box {
		width: 100%;
		height: 200rpx;
		display: flex;
		justify-content: space-evenly;
		box-sizing: content-box;
	}

	.popup-content-box text {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-top: 5%;
	}

	.popup-content-box-i {
		display: inline-block;
		width: 100rpx;
		height: 100rpx;
	}

	.popup-content-button {
		width: 80%;
		margin-bottom: 90rpx;
	}

	.popup-title {
		display: block;
		text-align: center;
		border-bottom: 2rpx solid #989898;
		padding: 30rpx 0;
	}

	.popup-title-text {
		width: 100%;
		height: 200rpx;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
	}

	.popup-title-text i {
		font-style: normal;
		color: #6a94c8;
		font-size: 22rpx;
	}
</style>